<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta charset="UTF-8"/>
    <title>用户信息查询</title>
    <div th:replace="/common/common_css :: base_css"></div>

</head>
<body>
<!--页面头部-->
<div th:replace="/common/common_body :: body_top"></div>

<div id="wrapper">
    <!--页面左侧菜单栏-->
    <div th:replace="/common/common_body :: body_left"></div>


    <div id="rightContent">
        <div class="check-div form-inline ">
            <form id="formData" action="query" method="post">
                <div class="col-xs-16">
                    <label>用户名：</label>
                    <input id="user_name" name="userName" th:value="${userName}" class="form-control input-sm"
                           type="text"/>
                    <button class="btn btn-white btn-lg" type="submit" style="margin-left: 74%">查 询</button>
                </div>
            </form>
        </div>
        <div id="page-wrapper">
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Advanced Tables -->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <button shiro:hasPermission="userInfo_add" class="btn btn-yellow btn-xs"
                                        data-toggle="modal" data-target="#addSource">添加资源
                                </button>
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover"
                                           id="dataTables-example">
                                        <thead>
                                        <tr>
                                            <th>用户名</th>
                                            <th>证件号</th>
                                            <th>图片</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>更新时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="gradeU" th:each="userInfo : ${pageInfo.list}">
                                            <td th:text="${userInfo.userName}"></td>
                                            <td th:text="${userInfo.cardInfo}"></td>
                                            <td style="width: 60px;">
                                                <img style="width:60px;height:86px"
                                                     th:src="'data:image/png;base64,'+${userInfo.imgBase}"/>
                                            </td>
                                            <td th:text="${userInfo.statu}"></td>
                                            <td th:text="${userInfo.creatTime}"></td>
                                            <td th:text="${userInfo.updateTime}"></td>
                                            <td>
                                                <button shiro:hasPermission="userInfo_update"
                                                        class="btn btn-success btn-xs" data-toggle="modal"
                                                        data-target="#changeSource"
                                                        th:onclick="'javascript:changeSourceQuery(\''+${userInfo.userId}+'\',\''+${userInfo.userName}+'\',\''+${userInfo.cardInfo}+'\',\''+${userInfo.statu}+'\')' ">
                                                    修改
                                                </button>
                                                <button shiro:hasPermission="userInfo_del" class="btn btn-danger btn-xs"
                                                        data-toggle="modal" data-target="#deleteSource"
                                                        th:onclick="'javascript:deleteValue('+${userInfo.userId}+')'">删除
                                                </button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div id="example" style="text-align: center">
                                        <ul id="pageLimit"></ul>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!--End Advanced Tables -->
                    </div>
                </div>
            </div>
        </div>

        <!--修改资源弹出窗口-->
        <div class="modal fade" id="changeSource" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改用户信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <form class="form-horizontal">
                                <div class="form-group ">
                                    <label for="userName_update" class="col-xs-3 control-label">用户名：</label>
                                    <div class="col-xs-8 ">
                                        <input class="form-control input-sm duiqi" id="userName_update" placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="cardInfo_update" class="col-xs-3 control-label">证件号：</label>
                                    <div class="col-xs-8 ">
                                        <input type="" class="form-control input-sm duiqi" id="cardInfo_update"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="statu_update" class="col-xs-3 control-label">状态：</label>
                                    <div class="col-xs-8">
                                        <input type="" class="form-control input-sm duiqi" id="statu_update"
                                               placeholder=""/>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                        <button type="button" class="btn btn-xs btn-green" data-dismiss="modal"
                                onclick="changeSourceUpdate()">保 存
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!--弹出删除资源警告窗口-->
        <div class="modal fade" id="deleteSource" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">提示</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            确定要删除该资源？删除后不可恢复！
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                        <button type="button" class="btn btn-xs btn-danger" data-dismiss="modal" onclick="deleteById()">
                            确 定
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


        <!--弹出新增资源窗口-->
        <div class="modal fade" id="addSource" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增用户信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            <form class="form-horizontal">
                                <div class="form-group ">
                                    <label for="userName_update" class="col-xs-3 control-label">用户名：</label>
                                    <div class="col-xs-8 ">
                                        <input class="form-control input-sm duiqi" id="userName_add" placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="cardInfo_update" class="col-xs-3 control-label">证件号：</label>
                                    <div class="col-xs-8 ">
                                        <input type="" class="form-control input-sm duiqi" id="cardInfo_add"
                                               placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="cardInfo_update" class="col-xs-3 control-label">图片：</label>
                                    <div class="col-xs-8 ">
                                        <input type="file" title="Search for a file to add 1" class="btn-primary"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="statu_update" class="col-xs-3 control-label">状态：</label>
                                    <div class="col-xs-8">
                                        <input type="" class="form-control input-sm duiqi" id="statu_add"
                                               placeholder=""/>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                        <button type="button" class="btn btn-xs btn-green" data-dismiss="modal" onclick="sourceAdd()">保
                            存
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <!-- 隐藏域-->
        <div>
            <!-- update弹出框用户的ID-->
            <input type="hidden" id="userId_update"/>

            <!--当前分页栏的页码-->
            <input type="hidden" id="pageNum" th:value="${pageNum}"/>

            <!--点击删除按钮，展示框带参属性-->
            <input type="hidden" id="deleteValue"/>

        </div>


    </div>
</div>

<!-- JS Scripts-->
<div th:replace="/common/common_js :: base_js"></div>

<script th:inline="javascript">
    $(document).ready(function () {
        //菜单栏选中
        $(".meun-item").removeClass("meun-item-active");
        $("#userInfo").addClass("meun-item-active");

        //分页插件初始化
        var element = $('#pageLimit');//对应下面ul的ID
        var options = {
            currentPage: [[${pageInfo.pageNum}]],//当前的请求页面。
            totalPages: [[${pageInfo.pages}]],//一共多少页。
            size: "normal",//应该是页眉的大小。
            bootstrapMajorVersion: 3,//bootstrap的版本要求。
            alignment: "right",
            numberOfPages: 5,//一页列出多少数据。
            onPageClicked: function (event, originalEvent, type, page) {
                $("#pageNum").val(page);//将分页栏信息存储在隐藏域中
                var userName = $("#user_name").val();
                $('#dataTables-example').load("queryList", {"userName": userName, "page": page});
            },
            itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            }
        }
        element.bootstrapPaginator(options);
    });

    //update弹出框数据展示
    function changeSourceQuery(userId, name, cardInfo, statu) {
        // $.ajax({
        //     type: "post",
        //     async: true,
        //     url: "queryUserInfoById",
        //     data: {
        //         userId: userId
        //     },
        //     dataType: "json",
        //     success: function (result) {
        //         $("#userId_update").val(result.userId);
        //         $("#userName_update").val(result.userName);
        //         $("#cardInfo_update").val(result.cardInfo);
        //         $("#statu_update").val(result.statu);
        //     },
        //     error: function (errorMsg) {
        //         alert("服务器或网络异常");
        //     }
        // });
        if (cardInfo == "null") {
            cardInfo = "";
        }

        $("#userId_update").val(userId);
        $("#userName_update").val(name);
        $("#cardInfo_update").val(cardInfo);
        $("#statu_update").val(statu);

    }

    //保存update弹出框数据
    function changeSourceUpdate() {
        $.ajax({
            type: "post",
            async: true,
            url: "updateById",
            data: {
                userId: $("#userId_update").val(),
                cardInfo: $("#cardInfo_update").val(),
                statu: $("#statu_update").val()
            },
            dataType: "json",
            success: function (result) {
                if (result.code == "success") {
                    alert(result.msg);
                    var page = Number($("#pageNum").val());
                    //更新成功，局部刷新列表
                    $('#dataTables-example').load("queryList", {"userName": $("#user_name").val(), "page": page});
                } else {
                    alert(result.msg);
                }

            },
            error: function (errorMsg) {
                alert("服务器或网络异常");
            }
        });

    }

    //点击删除按钮，展示删除框，进行带参
    function deleteValue(id) {
        $("#deleteValue").val(id);
    }

    //删除用户
    function deleteById() {
        $.ajax({
            type: "post",
            async: true,
            url: "deleteById",
            data: {
                userId: $("#deleteValue").val(),
            },
            dataType: "json",
            success: function (result) {
                if (result.code == "success") {
                    alert(result.msg);
                    var page = Number($("#pageNum").val());
                    //删除成功，局部刷新列表
                    $('#dataTables-example').load("queryList", {"userName": $("#user_name").val(), "page": page});
                } else {
                    alert(result.msg);
                }

            },
            error: function (errorMsg) {
                alert("服务器或网络异常");
            }
        });
    }

    //新增用户资源
    function sourceAdd() {
        $.ajax({
            type: "post",
            async: true,
            url: "addUserInfo",
            data: {
                userName: $("#userName_add").val(),
                cardInfo: $("#cardInfo_add").val(),
                statu: $("#statu_add").val()
            },
            dataType: "json",
            success: function (result) {
                if (result.code == "success") {
                    alert(result.msg);
                    //新增成功，局部刷新列表，直接跳至第一页
                    $('#dataTables-example').load("queryList", {"userName": $("#user_name").val(), "page": 1});
                } else {
                    alert(result.msg);
                }

            },
            error: function (errorMsg) {
                alert("服务器或网络异常");
            }
        });
    }

</script>
<div th:replace="/common/common_js :: bootstrapPaginator_js"></div>
</body>
</html>